<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="三角形" content="三角形">
        <meta description="三角形" content="三角形">
        <title>三角形</title>
        <style>
            .btn {
                position: relative;
                width: 100px;
                height: 50px;
                background-color: black;
                color: white;
                margin: 30px auto 0;
                line-height: 50px;
                text-align: center;
            }
            .tips {
                position: absolute;
                width: 300px;
                height: 50px;
                left: 50%;
                background-color: blue;
                margin-left: -150px;
                top: 60px;
                color: white

            }
            .tips::after {
                content:'';
                position: absolute;
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 10px solid transparent;
                border-bottom-color: red;
                left: 50%;
                margin-left: -10px;
                bottom: 50.5px;

            }
            .btn:hover .tips  {
                display: block;
            }
            .btn .tips {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="btn">
            查看
            <div class="tips">我想学习前端知识</div>
        </div>
    </body>
</html>